<template>
  <view>
    <!-- <view>
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="formData" labelWidth="50" labelAlign="right">
				<u-form-item label="团队名称" prop="title" borderBottom ref="item1" >
					<u--input v-model="formData.title" border="none" clearable></u--input>
				</u-form-item>
				<view class="warp-login__but">
					<u-button type="error" text="保存" @click="onSubmit"></u-button>
				</view>
			</u--form>
		</view> -->
    <view>

      <view><u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search></view>
      <u-gap height="2" bgColor="#f7f7f7"></u-gap>

      <view v-for="(member, index) in teamMembers" :key="index" :options="options1" @click="clickAtion">
        <u-cell :title="member.name" :isLink="true">
          <u-avatar slot="icon" size="40" src="https://cdn.uviewui.com/uview/album/3.jpg" customStyle="margin: -3px 5px -3px 0"></u-avatar>
          <u-button slot="right-icon" type="primary" size="mini" text="录入订单"></u-button>
          <template slot="value">

          </template>
          <template slot="label">
            <u--text type="info" color="#f7f7f7" text="加入时间：2024-03-03 17:00:58" size="12"></u--text>
            <view>
              <text class="text">金额：0.00</text>
              <!-- <text class="text">0个订单</text> -->
            </view>
          </template>
        </u-cell>
        <u-cell>
          <u-tag text="1个订单" plain size="mini" type="warning" slot="value">
          </u-tag>
          <template slot="icon">
            <u-button type="success" icon="edit-pen" size="mini" @click="showModals" text="配置比例"></u-button>
          </template>
          <template slot="right-icon">
            <u-button icon="trash-fill" type="error" size="mini" text="移除"></u-button>
          </template>
        </u-cell>
        <u-gap height="4" bgColor="#f7f7f7"></u-gap>
      </view>

      <u-button type="primary" class="fixed-bottom" @click="inviteUser">邀请用户</u-button>
    </view>

    <!-- <u-modal :show="showModal" @confirm="saveRatio" @cancel="hideModal">
      <view>
        <view v-for="(item, index) in items" :key="index">
          <text>{{ item.title }}</text>
          <view v-for="(subItem, subIndex) in item.subItems" :key="`sub-${subIndex}`">
            <view v-for="(input, inputIndex) in subItem.inputs" :key="`input-${inputIndex}`" class="flex-container">
              <text>{{ input.title }}</text>
              <view>
                <u--input placeholder="请输入内容" border="surround" v-model="input.value" ></u--input>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-modal> -->

    <u-popup :show="showModal" @close="hideModal" mode="bottom" :round="10" closeIconPos="top-right" closeable safeAreaInsetTop :customStyle="{height:'60%'}">
      <view class="mainbox">
        <view class="header">
          配置比例
        </view>
        <view class="content">
          <u-collapse :value="['0']" :border="true">
            <view v-for="(item, index) in items" :key="index">
              <u-collapse-item :title="item.title" :name="index">

                <view v-if="item.hasChildren">
                  <view v-for="(subItem, subIndex) in item.children" :key="`sub-${subIndex}`">
                    <text>{{ subItem.title }}(比例)</text>
                    <view class="flex-container">
                      <u-slider class="flex-item-2" v-model="subItem[`${subItem.alias}Value`]" min="1" max="90"></u-slider>
                      <u--input class="flex-item-1" placeholder="比例" border="surround" v-model="subItem[`${subItem.alias}Value`]" @input="handleInput($event, subItem, `${subItem.alias}Value`, 90)">
                        <template slot="suffix">%</template>
                      </u--input>
                      <u-tag class="mg-left" text="9%可配置" plain size="mini" type="warning"></u-tag>
                    </view>

                    <view v-if="subItem.hasChildren">
                      <u-collapse-item :title="subItem.title">
                        <view v-for="(input, inputIndex) in subItem.children" :key="`input-${inputIndex}`" class="flex-container">
                          <view class="flex-container">
                            <text class="flex-item-1">{{ input.title }}:</text>
                            <u-slider class="flex-item-3" v-model="input[`${input.alias}Value`]" min="1" max="90"></u-slider>
                            <u--input class="flex-item-1" placeholder="比例" border="surround" v-model="input[`${input.alias}Value`]" @input="handleInput($event, input, `${input.alias}Value`, 90)">
                              <template slot="suffix">%</template>
                            </u--input>
                            <u-tag class="mg-left" text="9%可配置" plain size="mini" type="warning"></u-tag>
                          </view>
                        </view>
                      </u-collapse-item>
                    </view>
                  </view>
                </view>

              </u-collapse-item>

            </view>
          </u-collapse>
        </view>
      </view>
    </u-popup>
    <!-- 是否移除团员 -->
    <!-- <u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      formData: {
        title: ''
      },
      sliderValues: {},
      inputValues: {},
      sliderMaxValue: 80,
      options1: [
        {
          text: '配置比例',
          style: {
            backgroundColor: '#3c9cff'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }
      ],
      teamMembers: [{ id: 1, name: '成员A' }, { id: 2, name: '成员B' }],
      showModal: false,
      value: 0,
      items: [
        {
          "id": 1,
          "typeid": "lhc",
          "title": "特码",
          "alias": "TeMa",
          "pid": "0",
          "remark": "",
          "min_consume": "2.00",
          "max_consume": "1000.00",
          "rate": "0.00",
          "max_rate": "0.00",
          "zhu": 0,
          "sort": 99,
          "status": 1,
          "is_nub": 1,
          "system_id": 1,
          "create_time": "2023-02-08 13:29:26",
          "update_time": "2023-02-08 14:20:41",
          "hasChildren": true,
          "isHasChildren": false,
          "children": [
            {
              "id": 2,
              "typeid": "lhc",
              "title": "直选",
              "alias": "TeMaZhiXuan",
              "pid": "TeMa",
              "remark": "从1-49中任选1个或多个号码，每个号码为一注，所选号码中包含特码，即为中奖。",
              "min_consume": "2.00",
              "max_consume": "1000.00",
              "rate": "45.00",
              "max_rate": "0.00",
              "zhu": 1,
              "sort": 99,
              "status": 1,
              "is_nub": 2,
              "system_id": 1,
              "create_time": "2023-02-08 13:42:06",
              "update_time": "2023-03-01 14:57:51",
              "hasChildren": false,
              "isHasChildren": false
            },
            {
              "id": 3,
              "typeid": "lhc",
              "title": "两面",
              "alias": "TeMaLiangMian",
              "pid": "TeMa",
              "remark": "开奖号码最后一位为特码。大于或等于25为特码大，小于或等于24为特码小；奇数为单，偶数为双；特码两个数相加后得数，奇数为合单，偶数为合双，小于等于6为合小，大于6为合大；尾大尾小即看特码个位数值，小于等于4为小，大于4为大；特码为49时为和，不算任何大小单双，但算波色。",
              "min_consume": "2.00",
              "max_consume": "1000.00",
              "rate": "0.00",
              "max_rate": "0.00",
              "zhu": 1,
              "sort": 99,
              "status": 1,
              "is_nub": 1,
              "system_id": 1,
              "create_time": "2023-02-08 14:12:23",
              "update_time": "2023-03-01 14:58:19",
              "hasChildren": true,
              "isHasChildren": false,
              "children": [
                {
                  "id": 4,
                  "typeid": "lhc",
                  "title": "大",
                  "alias": "TeMaLiangMianDa",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.80",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:13:07",
                  "update_time": "2023-02-21 09:43:16",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 5,
                  "typeid": "lhc",
                  "title": "小",
                  "alias": "TeMaLiangMianXiao",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.80",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:14:38",
                  "update_time": "2023-02-21 09:43:25",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 6,
                  "typeid": "lhc",
                  "title": "单",
                  "alias": "TeMaLiangMianDan",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.80",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:15:15",
                  "update_time": "2023-03-28 21:06:06",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 7,
                  "typeid": "lhc",
                  "title": "双",
                  "alias": "TeMaLiangMianShuang",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:15:28",
                  "update_time": "2023-02-08 14:15:28",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 8,
                  "typeid": "lhc",
                  "title": "大单",
                  "alias": "TeMaLiangMianDaDan",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "3.96",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:13:07",
                  "update_time": "2023-02-08 14:35:21",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 9,
                  "typeid": "lhc",
                  "title": "大双",
                  "alias": "TeMaLiangMianDaShuang",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "3.96",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:13:07",
                  "update_time": "2023-02-08 14:35:39",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 10,
                  "typeid": "lhc",
                  "title": "小单",
                  "alias": "TeMaLiangMianXiaoDan",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "3.96",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:14:38",
                  "update_time": "2023-02-08 14:35:50",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 11,
                  "typeid": "lhc",
                  "title": "小双",
                  "alias": "TeMaLiangMianXiaoShuang",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "3.96",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:14:38",
                  "update_time": "2023-02-08 14:35:57",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 12,
                  "typeid": "lhc",
                  "title": "合大",
                  "alias": "TeMaLiangMianHeDa",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:21:17",
                  "update_time": "2023-02-08 14:21:17",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 13,
                  "typeid": "lhc",
                  "title": "合小",
                  "alias": "TeMaLiangMianHeXiao",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:22:12",
                  "update_time": "2023-02-08 14:22:12",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 14,
                  "typeid": "lhc",
                  "title": "合双",
                  "alias": "TeMaLiangMianHeShuang",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:21:36",
                  "update_time": "2023-02-08 14:21:36",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 15,
                  "typeid": "lhc",
                  "title": "合单",
                  "alias": "TeMaLiangMianHeDan",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:22:27",
                  "update_time": "2023-02-08 14:22:27",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 16,
                  "typeid": "lhc",
                  "title": "尾大",
                  "alias": "TeMaLiangMianWeiDa",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:24:39",
                  "update_time": "2023-02-08 14:24:39",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 17,
                  "typeid": "lhc",
                  "title": "尾小",
                  "alias": "TeMaLiangMianWeiXiao",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:24:53",
                  "update_time": "2023-02-08 14:24:53",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 18,
                  "typeid": "lhc",
                  "title": "家禽",
                  "alias": "TeMaLiangMianJiaQin",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:25:15",
                  "update_time": "2023-02-08 14:25:15",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 19,
                  "typeid": "lhc",
                  "title": "野兽",
                  "alias": "TeMaLiangMianYeShou",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "1.98",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:25:30",
                  "update_time": "2023-02-08 14:25:30",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 20,
                  "typeid": "lhc",
                  "title": "红波",
                  "alias": "TeMaLiangMianHongBo",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "2.80",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:25:46",
                  "update_time": "2023-02-08 14:36:19",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 21,
                  "typeid": "lhc",
                  "title": "绿波",
                  "alias": "TeMaLiangMianLvBo",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "2.97",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:25:59",
                  "update_time": "2023-02-08 14:36:28",
                  "hasChildren": false,
                  "isHasChildren": false
                },
                {
                  "id": 22,
                  "typeid": "lhc",
                  "title": "蓝波",
                  "alias": "TeMaLiangMianLanBo",
                  "pid": "TeMaLiangMian",
                  "remark": "",
                  "min_consume": "2.00",
                  "max_consume": "1000.00",
                  "rate": "2.97",
                  "max_rate": "0.00",
                  "zhu": 0,
                  "sort": 99,
                  "status": 1,
                  "is_nub": 0,
                  "system_id": 1,
                  "create_time": "2023-02-08 14:26:12",
                  "update_time": "2023-02-08 14:36:36",
                  "hasChildren": false,
                  "isHasChildren": false
                }
              ]
            }
          ]
        },
      ],
    };
  },
  created() {
    this.items.forEach(item => {
      if (item.hasChildren) {
        item.children.forEach(subItem => {
          const dynamicValueProp = `${subItem.alias}Value`;
          this.$set(subItem, dynamicValueProp, ''); // 初始化动态属性
        });
      }
    });
  },

  methods: {
    clickAtion(e) {
      console.log(e);
    },
    navigateToSetting() {
      // 导航到团队设置页面
    },
    navigateToMemberDetail(id) {
      // 导航到成员详情页面
    },
    showModals() {
      this.showModal = true;
    },
    hideModal() {
      this.showModal = false;
    },
    saveRatio() {
      // Logic to save the ratio
      this.hideModal();
    },
    valChange(e) {
      console.log('当前值为: ' + e.value)
    },

    handleInput(event, subItem, valueProp, maxValue) {
      // 直接从subItem获取当前输入值
      let inputValue = Number(subItem[valueProp]);
      inputValue = isNaN(inputValue) ? 0 : inputValue; // 如果转换结果为NaN，则设为0

      // 如果输入值大于最大值，则将其设置为最大值
      const validValue = inputValue > maxValue ? maxValue : inputValue;

      // 更新subItem中对应的属性
      this.$set(subItem, valueProp, validValue.toString());
    }
  }
};
</script>

<style scoped>
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.text {
  margin-right: 20px; /* 或者你需要的任何间隔 */
  font-size: 24rpx;
  color: brown;
}

.flex-container {
  display: flex;
  align-items: center;
}
.mainbox {
  margin: 0rpx 20rpx 20rpx 20rpx;
  height: calc(800px * 0.95); /* 90% of the original height */
}

.content {
  overflow: auto;
  height: calc(100% - 50px);
}

.header {
  font-size: 32rpx; /* 设置字体大小 */
  font-weight: bold; /* 设置字体为粗体 */
  color: #333; /* 设置字体颜色 */
  text-align: center; /* 设置文本居中对齐 */
  padding: 20rpx 0;
  /* 设置上下的内边距 */
  /* background-color: #f5f5f5;  */
  /* 设置背景颜色 */
}
.flex-container {
  display: flex;
  align-items: center;
}
.flex-item-3 {
  flex: 3; /* 这个元素将占据剩余空间的两份 */
}

.flex-item-2 {
  flex: 2; /* 这个元素将占据剩余空间的两份 */
}

.flex-item-1 {
  flex: 1; /* 这个元素将占据剩余空间的一份 */
}

.mg-left{
  margin-left: 20rpx;
}
</style>
